const layer = layui.layer
<<<<<<< HEAD
axios.get('/my/article/cates').then(({ data: { data } }) => {
  const htmlStr = data.map(({ name, alias }) => {
    return `
          <tr>
            <td>${name}</td>
            <td>${alias}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs btn_edit">编辑</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete">删除</button>
            </td>
          </tr>
    `
  }).join('')
  $('#tbody').html(htmlStr)
})

$('#btnAddCate').on('click', function () {
  layer.open({
    type: 1, // 层的类型，1表示页面层
    title: '添加文章类别', // 标题
    area: ['500px', '250px'], // 宽度高度
    content: 'w', // 内容
    // skin: 'demo-class'
=======
const form = layui.form
getArtCate()
function getArtCate() {
  axios.get('/my/article/cates').then(({ data: { data } }) => {
    let htmlStr = data
      .map(({ name, alias, Id }) => {
        return `
                  <tr>
                      <td>${name}</td>
                      <td>${alias}</td>
                      <td>
                      <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${Id}">编辑</button>
                      <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete" data-id="${Id}">删除</button>
                      </td>
                  </tr>
                  `
      })
      .join('')
    $('#tbody').html(htmlStr)
  })
}

let indexAddForm; // index表示弹出层的索引
let addFormStr = `<form id="addForm" class="layui-form">
            <!-- 第一行 分类名称 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                  <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>
            <!-- 第二行 分类别名  -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                  <input type="text" name="alias" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>
            <!-- 第三行 按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
    </div>
</form>`
$('#btnAddCate').on('click', function () {
  indexAddForm = layer.open({
    content: addFormStr, // 内容
    type: 1, // 页面层
    title: '添加文章类别', // 标题
    area: ['500px', '250px'], // 定宽高
  })
})

// 确认添加分类
$("body").on("submit", "#addForm", function (e) {
  e.preventDefault();
  // 获取到表单数据
  const data = $(this).serialize();
  axios.post("/my/article/addcates", data).then((res) => {
    if (res.data.status !== 0) {
      return layer.msg("新增文章分类失败");
    }
    //弹框提示
    layer.msg("新增文章分类成功");
    //关闭弹出层
    layer.close(indexAddForm);
    //重新发送ajax，获取所有的分类数据
    getArtCate();
  });
});

// // 确认添加分类2
// $('body').on('submit' , '#addform' , function (e) {
//   e.preventDefault();
//   const data = $(this).serialize()
//   axios.post('/my/article/addcates' , data).then((res) => {
//     if(res.data.status !== 0) {
//       return layer.msg("新增文章分类失败");
//     }
//     layer.msg("新增文章分类成功");
//     layer.close(indexAddForm);
//     getArtCate();
//   })
// })

//点击删除，完成删除功能
let indexEditForm
let editFormStr = `<form id="editForm" class="layui-form" lay-filter="editForm">
            <!-- 存id -->
            <div class="layui-form-item layui-hide">
    <label class="layui-form-label">Id</label>
	<div class="layui-input-block">
    	<input type="text" name="Id" required  lay-verify="required" placeholder="Id" autocomplete="off" class="layui-input">
    </div>
</div>
            <!-- 第一行 分类名称 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                  <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>
            <!-- 第二行 分类别名  -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                  <input type="text" name="alias" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>
            <!-- 第三行 按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
    </div>
    </div>
</form>
`
$('#tbody').on('click', '.btn_edit', function () {
  const id = $(this).attr("data-id");
  // 发送请求
  axios.get("/my/article/cates/" + id).then((res) => {
    // 填充表单数据
    form.val("editForm", res.data.data);
  });
  // 编辑弹出层
  indexEditForm = layer.open({
    content: editFormStr, // 内容
    type: 1, // 页面层
    title: '修改文章类别', // 标题
    area: ['500px', '250px'], // 定宽高
  })
}) 

//完整确认修改 - 实现编辑功能
$('body').on('submit' , '#editForm' , function (e) {
  e.preventDefault()
  let data = $(this).serialize()
  axios.post('/my/article/updatecate' , data).then((res) => {
    if(res.data.status !== 0) {
      return layer.msg("更新失败");
    }
     // 弹框提示
     layer.msg("更新分类数据成功");
     // 关闭弹出层layer.open
     layer.close(indexEditForm);
    // 重新发送ajax获取最新分类数据
     getArtCate();
  })
})

//点击删除，完成删除功能
$('#tbody').on('click' , '.btn_delete' , function(){
  const id = $(this).attr('data-id')
  axios.get("/my/article/deletecate/" + id).then((res) => {
    if(res.data.status !== 0) {
      return layer.msg(res.data.message)
    }
    // 删除成功
    layer.msg(res.data.message);
    
    // 发送ajax请求
    getArtCate();
>>>>>>> article
  })
})